<template>
  <div style="max-width: 1200px; margin: 0 auto; padding: 20px;">
    <header style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 10px; text-align: center; margin-bottom: 40px;">
      <h1 style="font-size: 2.5em; margin: 0;">🔍 SSR vs CSR - SEO 对比详解</h1>
      <p style="font-size: 1.2em; margin-top: 15px; opacity: 0.95;">为什么浏览器能看到，搜索引擎却看不到？</p>
    </header>

    <!-- 核心问题 -->
    <section style="background: #fff3cd; border: 3px solid #ffc107; padding: 30px; border-radius: 10px; margin-bottom: 40px;">
      <h2 style="margin-top: 0; color: #856404;">❓ 你的疑问</h2>
      <p style="font-size: 1.2em; line-height: 1.8; color: #333;">
        "我 Vue 和 React 渲染的在浏览器里面也是有 HTML 啊？为什么 SEO 不够好？"
      </p>
      <p style="font-size: 1.1em; color: #666; margin-bottom: 0;">
        👇 关键在于：<strong>你看到的 HTML</strong> ≠ <strong>搜索引擎看到的 HTML</strong>
      </p>
    </section>

    <!-- 关键区别 -->
    <section style="margin-bottom: 40px;">
      <h2 style="text-align: center; font-size: 2em; margin-bottom: 30px;">🎯 关键区别</h2>
      
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
        <!-- CSR -->
        <div style="background: #fff5f5; border: 3px solid #ff6b6b; padding: 25px; border-radius: 10px;">
          <h3 style="margin-top: 0; color: #ff6b6b; font-size: 1.5em;">❌ CSR（客户端渲染）</h3>
          <p style="color: #666; line-height: 1.8;">Vue / React / Angular 传统方式</p>
          
          <div style="background: white; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="margin-top: 0; color: #333;">服务器返回的 HTML：</h4>
            <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto; font-size: 13px;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;我的网站&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  &lt;!-- 👆 空的！没有内容！ --&gt;
  &lt;script src="/app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
            <p style="color: #ff6b6b; font-weight: bold; margin-bottom: 0;">⚠️ 搜索引擎看到的就是这个空壳！</p>
          </div>
        </div>

        <!-- SSR -->
        <div style="background: #f1f8f4; border: 3px solid #4caf50; padding: 25px; border-radius: 10px;">
          <h3 style="margin-top: 0; color: #4caf50; font-size: 1.5em;">✅ SSR（服务端渲染）</h3>
          <p style="color: #666; line-height: 1.8;">Nuxt / Next.js 等框架</p>
          
          <div style="background: white; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="margin-top: 0; color: #333;">服务器返回的 HTML：</h4>
            <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto; font-size: 13px;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;我的网站&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="app"&gt;
    &lt;h1&gt;商品列表&lt;/h1&gt;
    &lt;div class="product"&gt;
      &lt;h2&gt;无线耳机&lt;/h2&gt;
      &lt;p&gt;价格：¥299&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- 👆 完整的内容！ --&gt;
  &lt;/div&gt;
  &lt;script src="/app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
            <p style="color: #4caf50; font-weight: bold; margin-bottom: 0;">✅ 搜索引擎能看到完整内容！</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 执行流程对比 -->
    <section style="margin-bottom: 40px;">
      <h2 style="text-align: center; font-size: 2em; margin-bottom: 30px;">⚙️ 执行流程对比</h2>
      
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
        <!-- CSR 流程 -->
        <div style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
          <h3 style="margin-top: 0; color: #ff6b6b;">CSR 流程（客户端渲染）</h3>
          <div style="position: relative; padding-left: 30px;">
            <div class="timeline-item">
              <span class="step">1</span>
              <div class="content">
                <h4>浏览器请求</h4>
                <p>向服务器请求 HTML</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step">2</span>
              <div class="content">
                <h4>服务器返回</h4>
                <p>返回<strong style="color: #ff6b6b;">空的 HTML</strong> + JS 文件链接</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step">3</span>
              <div class="content">
                <h4>下载 JS</h4>
                <p>浏览器下载 app.js（可能很大）</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step">4</span>
              <div class="content">
                <h4>解析 JS</h4>
                <p>浏览器解析和编译 JavaScript</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step">5</span>
              <div class="content">
                <h4>执行 JS</h4>
                <p>Vue/React 初始化、创建虚拟 DOM</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step">6</span>
              <div class="content">
                <h4>请求数据</h4>
                <p>调用 API 获取数据（axios/fetch）</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step">7</span>
              <div class="content">
                <h4>渲染页面</h4>
                <p>终于渲染出内容！<br>⏱️ <strong>总耗时：2-5秒</strong></p>
              </div>
            </div>
          </div>
          <div style="background: #fff5f5; padding: 15px; border-radius: 8px; margin-top: 20px; border-left: 4px solid #ff6b6b;">
            <p style="margin: 0; color: #c62828; font-weight: bold;">
              ⚠️ 问题：搜索引擎爬虫等不了这么久！<br>
              它只会看步骤 2 返回的空 HTML！
            </p>
          </div>
        </div>

        <!-- SSR 流程 -->
        <div style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
          <h3 style="margin-top: 0; color: #4caf50;">SSR 流程（服务端渲染）</h3>
          <div style="position: relative; padding-left: 30px;">
            <div class="timeline-item">
              <span class="step success">1</span>
              <div class="content">
                <h4>浏览器请求</h4>
                <p>向服务器请求 HTML</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step success">2</span>
              <div class="content">
                <h4>服务器处理</h4>
                <p><strong style="color: #4caf50;">服务器执行 Vue/React</strong></p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step success">3</span>
              <div class="content">
                <h4>服务器获取数据</h4>
                <p>在服务器调用 API 获取数据</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step success">4</span>
              <div class="content">
                <h4>服务器渲染</h4>
                <p>服务器渲染成完整 HTML</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step success">5</span>
              <div class="content">
                <h4>返回完整 HTML</h4>
                <p><strong style="color: #4caf50;">已包含所有内容！</strong><br>⏱️ <strong>总耗时：300-500ms</strong></p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step success">6</span>
              <div class="content">
                <h4>浏览器显示</h4>
                <p>立即显示完整页面</p>
              </div>
            </div>
            <div class="timeline-item">
              <span class="step success">7</span>
              <div class="content">
                <h4>Hydration</h4>
                <p>后台激活 JS，添加交互功能</p>
              </div>
            </div>
          </div>
          <div style="background: #f1f8f4; padding: 15px; border-radius: 8px; margin-top: 20px; border-left: 4px solid #4caf50;">
            <p style="margin: 0; color: #2e7d32; font-weight: bold;">
              ✅ 优势：搜索引擎在步骤 5 就能<br>
              看到完整的内容！
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 实际演示 -->
    <section style="margin-bottom: 40px;">
      <h2 style="text-align: center; font-size: 2em; margin-bottom: 30px;">🧪 实际验证</h2>
      
      <div style="background: #e3f2fd; padding: 30px; border-radius: 10px; border: 3px solid #2196f3;">
        <h3 style="margin-top: 0; color: #1976d2;">如何验证？</h3>
        
        <div style="background: white; padding: 20px; border-radius: 8px; margin: 20px 0;">
          <h4 style="margin-top: 0;">方法 1：查看网页源代码</h4>
          <ol style="line-height: 2;">
            <li>在当前页面（SSR）：右键 → <strong>查看网页源代码</strong></li>
            <li>你会看到完整的 HTML，包含所有内容</li>
            <li>这就是搜索引擎看到的！</li>
          </ol>
          <button 
            @click="viewSource" 
            style="background: #2196f3; color: white; padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; margin-top: 10px;"
          >
            🔍 查看当前页面源代码
          </button>
        </div>

        <div style="background: white; padding: 20px; border-radius: 8px; margin: 20px 0;">
          <h4 style="margin-top: 0;">方法 2：禁用 JavaScript</h4>
          <ol style="line-height: 2;">
            <li>打开开发者工具（F12）</li>
            <li>按 Ctrl+Shift+P（Mac: Cmd+Shift+P）</li>
            <li>输入 "Disable JavaScript" 并回车</li>
            <li>刷新页面</li>
          </ol>
          <p style="background: #fff3cd; padding: 15px; border-radius: 5px; border-left: 4px solid #ffc107;">
            <strong>结果：</strong><br>
            • <strong>CSR 页面</strong>：完全空白，什么都看不到 ❌<br>
            • <strong>SSR 页面</strong>：内容正常显示（只是没有交互） ✅
          </p>
        </div>

        <div style="background: white; padding: 20px; border-radius: 8px;">
          <h4 style="margin-top: 0;">方法 3：使用 curl 命令</h4>
          <p>模拟搜索引擎爬虫的行为（不执行 JavaScript）：</p>
          <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto;">curl http://localhost:3000/shop-fast</pre>
          <p style="color: #666; margin-bottom: 0;">返回的 HTML 中会包含完整的商品数据</p>
        </div>
      </div>
    </section>

    <!-- 搜索引擎爬虫的限制 -->
    <section style="margin-bottom: 40px;">
      <h2 style="text-align: center; font-size: 2em; margin-bottom: 30px;">🤖 搜索引擎爬虫的限制</h2>
      
      <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
        <h3 style="margin-top: 0; color: #ff6b6b;">为什么爬虫不执行 JavaScript？</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;">
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
            <h4 style="margin-top: 0; color: #333;">1️⃣ 成本太高</h4>
            <p style="color: #666; line-height: 1.8; margin-bottom: 0;">
              每天要爬取数十亿个页面，执行 JavaScript 需要消耗大量 CPU 和内存。成本太高！
            </p>
          </div>
          
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
            <h4 style="margin-top: 0; color: #333;">2️⃣ 速度太慢</h4>
            <p style="color: #666; line-height: 1.8; margin-bottom: 0;">
              执行 JS、等待数据加载、等待渲染...时间太长。爬虫需要快速抓取。
            </p>
          </div>
          
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
            <h4 style="margin-top: 0; color: #333;">3️⃣ 不可靠</h4>
            <p style="color: #666; line-height: 1.8; margin-bottom: 0;">
              JS 可能出错、API 可能超时、网络可能中断...爬虫希望获取稳定的内容。
            </p>
          </div>
        </div>

        <div style="background: #fff3cd; padding: 20px; border-radius: 8px; margin-top: 30px; border-left: 4px solid #ffc107;">
          <h4 style="margin-top: 0; color: #856404;">💡 Google 的情况</h4>
          <p style="color: #856404; line-height: 1.8; margin-bottom: 10px;">
            虽然 Google 声称能够执行 JavaScript，但：
          </p>
          <ul style="color: #856404; line-height: 2;">
            <li>不是所有页面都会执行</li>
            <li>执行有延迟（可能几天后）</li>
            <li>执行不稳定（可能失败）</li>
            <li>优先级较低</li>
          </ul>
          <p style="color: #c62828; font-weight: bold; margin: 15px 0 0 0;">
            结论：不要赌！SSR 才是王道！
          </p>
        </div>
      </div>
    </section>

    <!-- 总结 -->
    <section style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 15px;">
      <h2 style="text-align: center; font-size: 2em; margin-top: 0;">📚 总结</h2>
      
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px;">
        <div>
          <h3 style="margin-top: 0;">你在浏览器看到的：</h3>
          <p style="line-height: 2; opacity: 0.95;">
            1. 浏览器下载 HTML<br>
            2. 浏览器下载 JS<br>
            3. 浏览器执行 JS<br>
            4. JS 请求数据<br>
            5. JS 渲染页面<br>
            6. <strong>你看到完整的页面 ✅</strong>
          </p>
        </div>
        
        <div>
          <h3 style="margin-top: 0;">搜索引擎爬虫看到的：</h3>
          <p style="line-height: 2; opacity: 0.95;">
            1. 爬虫下载 HTML<br>
            2. <strong style="background: rgba(255,107,107,0.3); padding: 2px 8px; border-radius: 3px;">🛑 停！不执行 JS！</strong><br>
            3. 只能看到空的 &lt;div id="app"&gt;&lt;/div&gt;<br>
            4. <strong>看不到任何内容 ❌</strong><br>
            5. SEO 分数：0 分
          </p>
        </div>
      </div>

      <div style="background: rgba(255,255,255,0.2); padding: 25px; border-radius: 10px; margin-top: 30px; text-align: center;">
        <p style="font-size: 1.3em; margin: 0; font-weight: bold;">
          所以，虽然你的 Vue/React 应用在浏览器里看起来很完美，<br>
          但搜索引擎只能看到一个空壳！这就是为什么 SSR 对 SEO 更好！
        </p>
      </div>
    </section>

    <!-- 返回链接 -->
    <div style="text-align: center; margin-top: 40px;">
      <NuxtLink to="/" style="display: inline-block; background: #667eea; color: white; padding: 15px 40px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 1.1em;">
        ⬅️ 返回首页
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
const viewSource = () => {
  // 打开查看源代码
  window.open('view-source:' + window.location.href, '_blank')
}

useHead({
  title: 'SSR vs CSR - SEO 对比详解',
  meta: [
    { name: 'description', content: '详细解释为什么 SSR 对 SEO 更好，以及搜索引擎爬虫的工作原理' }
  ]
})
</script>

<style scoped>
.timeline-item {
  position: relative;
  padding-bottom: 30px;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 35px;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.step {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: #ff6b6b;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.step.success {
  background: #4caf50;
}

.content {
  margin-left: 20px;
}

.content h4 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 16px;
}

.content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}
</style>

